<!---
/*
 * @Description: 美妆镜partner
 * @Author: kanglin
 * @Date: 2018-10-09 08:45:16
 * @Copyright: Created by Panxsoft.
 */
 --->
<section class="partner" id="mirror-partner" >
    <div class="bym-wrapper">

        <div class="partner-content">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <ul class="list bym-not-list">
                            <li class="list-item">
                                <div class="list-item-thumb">
                                    <img src="//panx-website.gz.bcebos.com/images/home/partner/YUKI.jpg" alt="">
                                </div>
                                <span class="list-item-name">YUKI生活馆</span>
                            </li>
                            <li class="list-item">
                                <div class="list-item-thumb">
                                    <img src="//panx-website.gz.bcebos.com/images/home/partner/huanya.jpg" alt="">
                                </div>
                                <span class="list-item-name">环亚科技</span>
                            </li>
                            <li class="list-item">
                                <div class="list-item-thumb">
                                    <img src="//panx-website.gz.bcebos.com/images/home/partner/kazilan.jpg" alt="">
                                </div>
                                <span class="list-item-name">卡姿兰</span>
                            </li>
                        </ul>
                    </div>
                    <div class="swiper-slide">
                        <ul class="list bym-not-list">
                           
                            <li class="list-item">
                                <div class="list-item-thumb">
                                    <img src="//panx-website.gz.bcebos.com/images/home/partner/mingchuang.jpg" alt="">
                                </div>
                                <span class="list-item-name">名创优品</span>
                            </li>
                            <li class="list-item">
                                <div class="list-item-thumb">
                                    <img src="//panx-website.gz.bcebos.com/images/home/partner/bolaiya.jpg" alt="">
                                </div>
                                <span class="list-item-name">珀莱雅</span>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>



            <!-- 箭头 begin -->
            <div class="partner-content-next">
                <img src="//gz.bcebos.com/panx-website/images/home/partner/next.png" alt="next">
            </div>
            <div class="partner-content-prev">
                <img src="//gz.bcebos.com/panx-website/images/home/partner/prev.png" alt="prev">
            </div>
            <!-- 箭头 end -->
        </div>

    </div>
</section>

<script>
 window.addEventListener('load', function(){
        
        var next = document.querySelector('#mirror-partner .partner-content-next');
        var prev = document.querySelector('#mirror-partner .partner-content-prev');
        var children = document.querySelector('#mirror-partner .swiper-wrapper').children;
        next.style.display = 'none';

        var swiper = new Swiper('#mirror-partner .swiper-container',{
            autoplay : 5000,//可选选项，自动滑动
            // loop : true,//可选选项，开启循环
            queueEndCallbacks : true,
            queueStartCallbacks : true,
            onSlideChangeEnd: changeEndHandle,
            simulateTouch: true
        });

        function changeEndHandle (swiper) {
            if ((swiper.activeIndex+1) === children.length) {
                prev.style.display = 'none';
            } else {
                prev.style.display = 'block';
            }

            if (swiper.activeIndex === 0) {
                next.style.display = 'none';
            } else {
                next.style.display = 'block';
            }
            
        }

        prev.addEventListener('click', function (event) {
            event.preventDefault();
            swiper.swipeNext();
            // alert(swiper.activeIndex)
        }, false);

        next.addEventListener('click', function (event) {
            event.preventDefault();
            swiper.swipePrev();
        }, false);

    });
</script>